<template>
  <div>
    <PageTools>
      <template #before>
        <el-button type="primary" @click="addhouseDialog">添加房产</el-button>
      </template>
      <template #after>
        <el-row type="flex">
          <el-select v-model="classifySelect" placeholder="请选择" style="width:150px">
            <el-option value="全部分类" />
            <el-option
              v-for="item in classifyList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </el-select>
          <el-select v-model="brokerSelect" placeholder="请选择" style="width:150px">
            <el-option value="全部经纪" />
            <el-option
              v-for="item in screenList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-input v-model="pageConfig.title_contains" placeholder="请输入内容" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="inquireClick" />
          </el-input>
        </el-row>
      </template>
      <template #main>
        <el-table
          :data="propertiesList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="封面"
          >
            <template #default="{row}">
              <img
                :src="row.image"
                alt=""
                style="width:200px;"
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            prop="tags"
            label="标签"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
          <el-table-column
            prop="category.title"
            label="分类"
          />
          <el-table-column
            prop="agent.name"
            label="经纪"
          />
          <el-table-column
            prop="price"
            label="价格"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          >
            <template #default="{row}">
              <el-popover
                placement="bottom"
                :title="`${row.title}的介绍`"
                width="400"
                trigger="click"
                :content="row.desc"
              >
                <el-button slot="reference">查看介绍</el-button>
              </el-popover></template>
          </el-table-column>
          <el-table-column
            prop="photos"
            label="图片"
          >
            <template #default="{row}">
              <el-row type="flex">
                <el-col v-for="(url,index) in row.photos" :key="index">
                  <img :src="url" alt="" style="width:50px;">
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="hoseEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="hoseDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 底部 -->
      <template #footer>
        <el-pagination
          small
          layout="prev, pager, next"
          :page-size.sync="pageConfig._limit"
          :total="total"
          :current-page.sync="currenPage"
          @current-change="changePage"
        />
      </template>
    </PageTools>
    <!-- 弹框 -->
    <hoseDialog
      ref="hoseDialog"
      :dialog-form-visible.sync="dialogFormVisible"
      :screen-list="screenList"
      :classify-list="classifyList"
      @refreshHouse="refreshHouse"
    />
  </div>
</template>

<script>
import hoseDialog from './component/hoseDialog.vue'
import { getProperties, getPropertiesCount, delProperty } from '@/api/houseProperty'
import { getagents } from '@/api/economics'
import { getCate } from '@/api/categories'
export default {
  components: { hoseDialog },
  data() {
    return {
      propertiesList: [],
      screenList: [],
      classifyList: [],
      brokerSelect: '全部经纪',
      classifySelect: '全部分类',
      dialogFormVisible: false,
      pageConfig: {
        _limit: 2,
        _start: 0,
        agent_contains: '' || null,
        title_contains: '' || null,
        category_contains: '' || null

      },
      total: 0,
      currenPage: 1
    }
  },
  created() {
    // 刷新页面
    this.refreshHouse()
    this.getSele()
  },
  methods: {
    // 获取房产列表
    async getProperties() {
      // 获取列表--分页
      const { data } = await getProperties(this.pageConfig)
      this.propertiesList = data
    },
    // 获取选择器内容
    async getSele() {
      // 获取经纪列表
      const screen = await getagents()
      // 获取分类列表
      const classify = await getCate()
      // console.log(screen)
      this.screenList = screen.data
      this.classifyList = classify.data
      // console.log(data)
    },
    // 获取总数
    async getPropertiesCount() {
      const count = await getPropertiesCount(this.pageConfig)
      // console.log(count)
      this.total = count.data
    },
    // 修改分页
    changePage(newPage) {
      this.pageConfig._start = this.pageConfig._limit * (newPage - 1)
      // 重新获取获取房产列表
      this.refreshHouse(this.pageConfig)
    },
    // 刷新页面
    refreshHouse() {
      this.getProperties()
      this.getPropertiesCount()
    },
    // 重置start与页码
    reset() {
      this.pageConfig._start = 0
      this.currenPage = 1
    },
    // 添加
    addhouseDialog() {
      this.dialogFormVisible = true
    },
    // 编辑
    hoseEdit(index, row) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.hoseDialog.hoseEdit(row.id)
      })
    },
    // 删除
    async hoseDelete(index, row) {
      // 二次询问
      await this.$confirm('确认删除?')
      // 发起删除请求
      await delProperty(row.id)
      // 提示
      this.$message.success('删除成功')
      if (this.propertiesList.length === 1 && this.pageConfig._start >= 1) {
        this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
        this.currenPage--
      }
      // 刷新页面
      this.refreshHouse()
    },
    // 查询
    async inquireClick() {
      // 重置页码
      this.reset()
      this.pageConfig.agent_contains = this.brokerSelect === '全部经纪' ? null : this.brokerSelect
      this.pageConfig.category_contains = this.classifySelect === '全部分类' ? null : this.classifySelect
      // 获取数据
      await this.refreshHouse()
    }
  }
}
</script>

<style>
</style>
